<template>
    <!-- a和c就是单纯的属性名，而b和d因为前面加了冒号，因此变成了表达式，有运算的能力了 -->
    <h2 a="1+1" :b="1+1" c="x" :d="x"></h2>

    <!-- list因为前面加了冒号，因此是一个表达式，后面的persons不再只是一个字符串，而是一个数据 -->
    <!-- <Person a="haha" :list="persons"/> -->

    <!-- 不传list，让子组件使用默认值 -->
    <Person a="haha"/>
</template>

<script lang="ts" setup name="App">
    import { reactive } from 'vue';
    import Person from './components/Person.vue';
    import { type Persons } from '@/types';

    let x = 19;

    // 推荐使用reactive<xxx>这种泛型的方式来使用
    let persons = reactive<Persons>([
        { id: 'adfaga1', name: '张三', age: 20 },
        { id: 'adfaga2', name: '李四', age: 21 },
        { id: 'adfaga3', name: '王五', age: 22 },
    ]);
</script>
